<script setup lang="ts" name="safetyhat_index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import { auto } from "@popperjs/core";
import airtrend from "./airtrend/airtrend.vue";
import { CirclePlus, Search, Refresh, EditPen, Share, Notebook, Setting } from '@element-plus/icons-vue'
import { url } from "inspector";

// 导入插件
import gaodemap from "./gaodemap/gaodemap.vue"

// 导入图片
// import wushujv from '@/assets/image/home/png/wushujv.png'


const router = useRouter();

onMounted(() => {

  // 图表
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById('energypie')!;
  var myChart = echarts.init(chartDom);
  window.onresize = function () {
    myChart.resize();
  };
  var option: EChartsOption;
  // 空气质量饼图
  option = {
    tooltip: {
      // trigger: 'item'
    },
    textStyle: {
      color: '#ffff'
    },
    legend: {
      orient: "horizontal",
      bottom: 'top',
      top: "85%",
      itemWidth: 25,
      itemHeight: 14,
      data: [
        { name: '已绑定', textStyle: { color: 'auto' }, },
        { name: '未绑定', textStyle: { color: 'auto' }, }
      ]
    },
    series: [
      {
        center: ['50%', '42%'],
        name: '空气质量',
        type: 'pie',
        radius: '65%',
        label: {
          fontSize: 14,
          color: 'auto'
        },
        data: [
          { value: 23, name: '已绑定' },
          { value: 61, name: '未绑定' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        }
      }
    ]
  };
  option && myChart.setOption(option);

})

</script>

<template>
  <div class="safetyhat-flex">
    <div class="safetyhat-box">
      <!-- 项目人员 -->
      <app-box class="safetyhat-en" :title="'项目人员'">
        <div class="bangimg">
          暂无数据
        </div>
      </app-box>
      <!-- 安全帽绑定率统计 -->
      <app-box class="safetyhat-en-bo" :title="'安全帽绑定率统计'">
        <div id="energypie" style="height: 90%;"></div>
      </app-box>
    </div>
    <div class="safetyhat-bom">
      <!-- 高德MAP -->
      <app-box class="safetyhat-bom-top" :title="'MAP'">
        <div class="safetyhat-map">
          <!-- 高德地图 -->
          <gaodemap></gaodemap>
        </div>
      </app-box>
    </div>
  </div>
</template>

<style  lang="scss" scoped>
// .xxx-x {
//   width: 100%;
//   height: 100%;
// }


// 总页面
.safetyhat-flex {
  display: flex;
  width: 100%;
  height: 100%;
}

.safetyhat-box {
  margin-right: 10px;
  height: 100%;
  width: 30%;
}

.safetyhat-en {
  height: 50%;
  width: 100%;
  text-align: center;
  position: relative;
}

.safetyhat-en-bo {
  height: calc(50% - 10px);
  width: 100%;
  margin-top: 10px;
}

.safetyhat-bom {
  height: 100%;
  width: 70%;
}

.safetyhat-bom-top {
  height: 100%;
  width: 100%;
}

// 内容
// 项目人员
.safetyhat-en-img {
  width: 90%;
  height: 90%;
  text-align: center;
}

// 背景图片
.bangimg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center, center;
  background-image: url('../../../assets/image/home/png/wushujv.png');
}

// map地图
.safetyhat-map {
  width: calc(100% - 20px);
  height: calc(100% - 60px);
  margin: 10px;
  background: rgb(0, 0, 0);
}
</style>
